import { Slider, Button, Collapse } from 'antd'
import { ReloadOutlined } from '@ant-design/icons'
import { useLightStore } from '@/stores'
import DialogForm, { FormItemConfig } from '@/components/DIalogForm'
import './index.css'
import { useState } from 'react'

const { Panel } = Collapse

export default function ControlPanel({ collapsed }: { collapsed?: boolean }) {
  const lightConfig = useLightStore(state => state.lightConfig)
  const setAmbientIntensity = useLightStore(state => state.setAmbientIntensity)
  const setDirectionalIntensity = useLightStore(state => state.setDirectionalIntensity)
  const setDirectionalPositionX = useLightStore(state => state.setDirectionalPositionX)
  const setDirectionalPositionY = useLightStore(state => state.setDirectionalPositionY)
  const setDirectionalPositionZ = useLightStore(state => state.setDirectionalPositionZ)
  const resetLight = useLightStore(state => state.resetLight)
  const [open, setOpen] = useState(false)

  interface FormInitialValues extends Record<string, unknown> {
    username: string
    email: string
    password: string
  }
  const [formInitialValues, setFormInitialValues] = useState<FormInitialValues>({
    username: '默认用户名',
    email: 'example@email.com',
    password: '',
  })

  const handleChange = (changedValues: FormInitialValues, value: string) => {
    console.log('value', value)
    return {
      type: 'update',
      data: {
        password: 'aaaaaa',
      },
    }
    // setFormInitialValues({
    //   ...changedValues,
    //   password: 'aaaaaassss',
    // })
    // 在这里根据值做其他操作
  }

  const handleOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  // 监听表单值变化
  const handleValuesChange = (
    changedValues: Partial<FormInitialValues>,
    allValues: FormInitialValues
  ) => {
    console.log('变化的字段:', changedValues)
    console.log('所有字段值:', allValues)

    // 根据变化的字段做相应操作
    if (changedValues.username !== undefined) {
      return handleChange(allValues, changedValues.username as string)
      // 可以在这里做其他操作，比如：
      // - 更新其他字段
      // - 调用 API
      // - 更新状态
    }
  }
  const [formItems] = useState<FormItemConfig[]>([
    {
      name: 'username',
      label: '用户名',
      placeholder: '请输入用户名',
      componentType: 'input',
      rules: [{ required: true, message: '请输入用户名' }],
    },
    { name: 'password', label: '密码', placeholder: '请输入密码', componentType: 'password' },
    { name: 'email', label: '邮箱', placeholder: '请输入邮箱', componentType: 'email' },
  ])
  if (collapsed) return null

  return (
    <div className="control-panel-content">
      <Collapse defaultActiveKey={['1']} ghost>
        <Panel header="光照设置" key="1">
          <div className="light-controls">
            <div className="control-item">
              <div className="control-label">
                <span>环境光</span>
                <span className="control-value">{lightConfig.ambientIntensity.toFixed(2)}</span>
              </div>
              <Slider
                min={0}
                max={1}
                step={0.01}
                value={lightConfig.ambientIntensity}
                onChange={setAmbientIntensity}
              />
            </div>

            <div className="control-item">
              <div className="control-label">
                <span>平行光强度</span>
                <span className="control-value">{lightConfig.directionalIntensity.toFixed(2)}</span>
              </div>
              <Slider
                min={0}
                max={2}
                step={0.01}
                value={lightConfig.directionalIntensity}
                onChange={setDirectionalIntensity}
              />
            </div>

            <div className="control-group">
              <div className="control-group-title">平行光位置</div>
              <div className="control-item">
                <div className="control-label">
                  <span>X 轴</span>
                  <span className="control-value">
                    {lightConfig.directionalPosition[0].toFixed(1)}
                  </span>
                </div>
                <Slider
                  min={-20}
                  max={20}
                  step={0.1}
                  value={lightConfig.directionalPosition[0]}
                  onChange={setDirectionalPositionX}
                />
              </div>
              <div className="control-item">
                <div className="control-label">
                  <span>Y 轴</span>
                  <span className="control-value">
                    {lightConfig.directionalPosition[1].toFixed(1)}
                  </span>
                </div>
                <Slider
                  min={-20}
                  max={20}
                  step={0.1}
                  value={lightConfig.directionalPosition[1]}
                  onChange={setDirectionalPositionY}
                />
              </div>
              <div className="control-item">
                <div className="control-label">
                  <span>Z 轴</span>
                  <span className="control-value">
                    {lightConfig.directionalPosition[2].toFixed(1)}
                  </span>
                </div>
                <Slider
                  min={-20}
                  max={20}
                  step={0.1}
                  value={lightConfig.directionalPosition[2]}
                  onChange={setDirectionalPositionZ}
                />
              </div>
            </div>

            <Button icon={<ReloadOutlined />} onClick={resetLight} block className="reset-btn">
              重置光照
            </Button>
            <Button onClick={handleOpen} block className="reset-btn">
              打开弹窗
            </Button>
            <DialogForm<FormInitialValues>
              formItems={formItems}
              open={open}
              initialValues={formInitialValues}
              onCancel={handleClose}
              onValuesChange={handleValuesChange}
            />
          </div>
        </Panel>
      </Collapse>
    </div>
  )
}
